<template>
  <custom-modal v-bind="$attrs" :title="title">
    <n-form :model="model" style="width: 100%">
      <n-form-item label="日程名称" path="inputValue">
        <n-input v-model:value="model.inputValue" placeholder="请输入日程名称" />
      </n-form-item>

      <n-form-item label="日期" path="date">
        <n-date-picker v-model:value="model.timestamp" class="w100" type="date" />
      </n-form-item>
      <n-grid>
        <n-gi :span="12">
          <n-form-item label="开始时间" path="startAt">
            <n-time-picker
              v-model="model.startAt"
              placeholder="请选择开始时间"
              class="w100"
              style="margin-right: 16px"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="结束时间" path="endAt">
            <n-time-picker v-model="model.endAt" placeholder="请选择结束时间" class="w100" />
          </n-form-item>
        </n-gi>
      </n-grid>

      <n-form-item label="备注" path="remark">
        <n-input v-model:value="model.remark" type="textarea" placeholder="请输入备注" />
      </n-form-item>
      <n-form-item label="颜色" path="color">
        <div class="flex">
          <div
            v-for="item in colorList"
            :key="item"
            class="color-dot"
            :style="'background:' + item"
          ></div>
        </div>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-button size="small">取消</n-button>
      <n-button type="primary" size="small">确认</n-button>
    </template>
  </custom-modal>
</template>

<script lang="ts" setup>
  const model = ref<Record<string, any>>({})
  defineProps<{
    title: string
  }>()
  const colorList = ['#fc5a5a', '#fd8c36', '#ffc842', '#3dd599', '#50b6fe', '#936efe', '#ff99d5']
</script>

<style scoped lang="scss">
  .color-dot {
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }
</style>
